<template>
    <view class="history-feedback-con">
        <view class="list-wrap">
            <view class="card" v-for="item in list" :key="item.id" @click="gotoUrl('/views/index/feedback-detail?id=123')">
                <view class="content">{{ item.content }}</view>
                <view class="time">{{ item.time }}</view>
            </view>

            <view class="load-more">
                <u-loadmore v-if="useULoadmore" :status="loadStatus" :loading-text="'加载中'" :loadmore-text="'上拉加载更多'" :nomore-text="'没有更多了'" />
                <text v-else class="simple-load">{{ loadStatusText }}</text>
            </view>
        </view>
    </view>
    </template>
<script>
import headerVue from '@/components/header.vue';
export default {
    components: { headerVue },
    data() {
        return {
            list: [],
            page: 1,
            pageSize: 10,
            finished: false,
            loading: false,
            useULoadmore: true
        }
    },
    computed: {
        loadStatus() {
            if (this.loading) return 'loading'
            if (this.finished) return 'nomore'
            return 'loadmore'
        },
        loadStatusText() {
            return this.finished ? '没有更多了' : (this.loading ? '加载中' : '上拉加载更多')
        }
    },
    onLoad() {
        this.loadMore()
    },
    onReachBottom() {
        this.loadMore()
    },
    methods: {
        gotoUrl(url){
            uni.navigateTo({url: url})
        },
        loadMore() {
            if (this.loading || this.finished) return
            this.loading = true
            this.mockFetch(this.page, this.pageSize).then(({ list, hasMore }) => {
                this.list = this.list.concat(list)
                this.page += 1
                this.finished = !hasMore
            }).finally(() => {
                this.loading = false
            })
        },
        mockFetch(page, pageSize) {
            return new Promise((resolve) => {
                setTimeout(() => {
                    const totalPages = 3
                    const hasMore = page < totalPages
                    const baseIndex = (page - 1) * pageSize
                    const mock = Array.from({ length: pageSize }).map((_, i) => {
                        const id = baseIndex + i + 1
                        return {
                            id,
                            content: '在 “个人中心” 页面，点击 “编辑资料” 时偶尔会出现点击没有响应的情况以及点击后需要长时间等待。',
                            time: this.formatTime(new Date(Date.now() - id * 86400000))
                        }
                    })
                    resolve({ list: mock, hasMore })
                }, 400)
            })
        },
        formatTime(date) {
            const y = date.getFullYear()
            const m = String(date.getMonth() + 1).padStart(2, '0')
            const d = String(date.getDate()).padStart(2, '0')
            const hh = String(date.getHours()).padStart(2, '0')
            const mm = String(date.getMinutes()).padStart(2, '0')
            const ss = String(date.getSeconds()).padStart(2, '0')
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
    }
}
</script>
<style lang="scss" scoped>
.history-feedback-con {
    width: 100%;
    min-height: 100vh;
    background: #f6f6f6;
}

.list-wrap {
    padding: 24rpx 24rpx 40rpx;
}

.card {
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    padding: 24rpx;
    margin-bottom: 20rpx;
}
.content {
    font-size: 24rpx;
    color: #666666;
    line-height: 1.6;
    text-align: justify;
    // 两行溢出显示省略号
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.time {
    margin-top: 16rpx;
    font-size: 20rpx;
    color: #999999;
}

.load-more {
    padding: 24rpx 0 40rpx;
    display: flex;
    justify-content: center;
}
.simple-load {
    color: #999;
    font-size: 24rpx;
}
</style>